<!DOCTYPE html><html><head><title>04-样式初始化+display+外边距合并</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="04-样式初始化display外边距合并">04-样式初始化+display+外边距合并</h1>

<h3 id="一标签样式初始化">一、标签样式初始化</h3>

<blockquote>
  <p><code>css reset原则</code>：但凡是浏览默认的样式，都不要使用。 <br>
  参考网址：<a href="http://tguide.qq.com/main/base.htm#css-list01" target="_blank">http://tguide.qq.com/main/base.htm#css-list01</a></p>
</blockquote>



<h3 id="二标签的两大阵营">二、标签的两大阵营</h3>



<h4 id="描述">描述：</h4>

<blockquote>
  <p>大多数 HTML 元素被定义为块级元素或内联元素。根据CSS规范的规定， <br>
  每一个网页元素都有一个display属性，用于确定该元素的类型，每一 <br>
  个元素都有默认的display属性值，比如div元素，它的默认display属 <br>
  性值为“block”，成为“块级”元素；而span元素的默认display属性 <br>
  值为“inline”，称为“行内”元素。</p>
</blockquote>



<h3 id="三块级标签的特点">三、块级标签的特点</h3>



<h4 id="display属性默认为block">display属性默认为<code>block</code></h4>

<blockquote>
  <p>1、独占一行，不和其他元素呆在一行 <br>
  2、可以设置宽高、外边距和内边距 <br>
  3、没有宽度时默认宽度为父级的宽度100% <br>
  4、可以容纳内联元素和其他块元素 <br>
  <code>常见块级标签：div、h1、p、hr</code> <br>
  <code>列表标签具备块级的一切特点</code></p>
</blockquote>



<h3 id="四内联标签-行内标签-特点">四、内联标签 / 行内标签 特点</h3>



<h4 id="display属性默认为inline">display属性默认为<code>inline</code></h4>

<blockquote>
  <p>1、性情温和，喜欢和其他内联元素呆在一行 <br>
  2、不支持设置宽高 <br>
  3、内容撑开宽高，宽高就是它的文字的宽高 <br>
  4、只能容纳文本和其他内联元素 <br>
  5、不支持上下margin，上下padding只对自身有效 <br>
  <code>常见内联(行内)标签：span、strong、em、a、i</code></p>
</blockquote>



<h3 id="五标签类型转换">五、标签类型转换</h3>

<blockquote>
  <p>display：block  显示为块    , 使内联元素具备块元素的特性 <br>
  display：inline     显示为内联  ,    使块级元素具备内联元素的特性 <br>
  display：none   隐藏元素，包括它的子元素，并且不在页面中占据位置</p>
</blockquote>



<h3 id="六内联块-行内块-标签的特点">六、内联块 / 行内块 标签的特点</h3>



<h4 id="优点"><code>优点：</code></h4>

<blockquote>
  <p>1、块级可以（横排展示）   ——友好 <br>
  2、行内标签支持宽高 <br>
  3、没有宽度的时候内容撑开宽度 <br>
  4、支持margin</p>
</blockquote>



<h4 id="缺点"><code>缺点</code></h4>

<blockquote>
  <p>1、标签间空格 被解析 <br>
  2、不支持margin:auto; <br>
  3、ie6 ie7 不支持块属性标签的inline-block;</p>
</blockquote>



<h3 id="七外边距合并">七、外边距合并</h3>



<h4 id="1概述">1、概述：</h4>

<blockquote>
  <p>外边距合并：当两个（垂直外边距）相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</p>
</blockquote>



<h4 id="2外边距合并的几种情况">2、外边距合并的几种情况</h4>

<blockquote>
  <p>1)、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。 <br>
  <img longdesc="./图片1.gif" alt="Alt text" title="" type="image/gif" src="" class=""></p>
  
  <p>2)、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 <br>
  <img longdesc="./图片2.gif" alt="Alt text" title="" type="image/gif" src="" class=""></p>
</blockquote>

<p><code>注：</code>只有普通文档流中块级的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。</p>



<h3 id="七元素中文本的水平对齐方式">七、元素中文本的水平对齐方式</h3>



<h4 id="text-align">text-align:</h4>

<blockquote>
  <p>left    把文本排列到左边 <br>
  right  把文本排列到右边 <br>
  center     文本水平居中</p>
</blockquote></div></body></html>